<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<!-- 引入bootstrap的css -->
<link rel="stylesheet" href="../js/bootstrap/bootstrap3/css/bootstrap.css">
<link rel="stylesheet" href="../js/bootstrap/bootstrap3/css/bootstrap-theme.css">
<!-- 引入jquery的js -->
<script type="text/javascript" src="../js/jquery.min.js"></script>
<!-- 引入bootstrap的js -->
<script type="text/javascript" src="../js/bootstrap/bootstrap3/js/bootstrap.js"></script>

<!-- 引入boostrap的表格的css、js -->
<link rel="stylesheet" href="../js/bootstrap/bootstrap-table/bootstrap-table.css">
<script type="text/javascript" src="../js/bootstrap/bootstrap-table/bootstrap-table.js"></script>
<script type="text/javascript" src="../js/bootstrap/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>
<!-- 引入bootbox弹框的js -->
<script type="text/javascript" src="../js/bootstrap/bootstrap-bootbox/bootbox.js"></script>

<!-- 引入bootstrap的日期的css、js -->
<link rel="stylesheet" href="../js/bootstrap/bootstrap-datetimepicker/css/bootstrap-datetimepicker.css">
<script type="text/javascript" src="../js/bootstrap/bootstrap-datetimepicker/js/bootstrap-datetimepicker.js"></script>
<script type="text/javascript" src="../js/bootstrap/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
<!-- 引入fileinput 文件上传的 css、js -->
<link rel="stylesheet" href="../js/bootstrap/bootstrap-fileinput/css/fileinput.css">
<script type="text/javascript" src="../js/bootstrap/bootstrap-fileinput/js/fileinput.js"></script>
<script type="text/javascript" src="../js/bootstrap/bootstrap-fileinput/js/locales/zh.js"></script>

<body>
<button onclick="openAdd()" class="btn btn-primary glyphicon glyphicon-plus" type="button">新增轮播图</button>
<table class="table" id="myTable"></table>
</body>
<script>
    //页面加载
    $(function(){
        initTable();
    })
    //初始化列表
    function initTable(){
        $('#myTable').bootstrapTable({
            url:'../carousel/queryCarousel',//获取数据地址
            columns:[
                {field:"checkbox",checkbox:true},
                {field:"id",title:"id"},
                {field:"url",title:"图片",
                    formatter(value,row,index){
                        return "<img style='width:50px;height:50px;' src='"+value+"'>"
                    }
                },
                {field:"tool",title:"操作",formatter:function(value,row,index){
                        return "<a href='javascript:up("+row.id+")'>修改图片</a>"+" | "+
                            "<a href='javascript:del("+row.id+")'>删除图片</a>";
                    }}
            ]
        });
    }
    var res;
    function createAddContent(url){
        $.ajax({
            url:url,
            async:false,//同步
            success:function(data){
                res = data;
            }
        });
        return res;
    }
    //删除
    function del(id){
        bootbox.confirm({
            size: "small",
            title: "提示",
            message: "是否确认删除？",
            buttons: {
                confirm: {
                    label: '确定',
                    className: 'btn-success'
                },
                cancel: {
                    label: '取消',
                    className: 'btn-danger'
                }
            },
            callback: function(result){
                if(result){//删除
                    //调用ajax请求后台，回调刷新表格
                    $.ajax({
                        url:"../carousel/del",
                        type:"post",
                        data:{id:id},
                        success:function(data){
                            alert("删除成功")
                            $('#myTable').bootstrapTable("refresh");
                            //刷新表格:有条查调用条查，没有条查自己写refresh方法
                        }
                    })
                }
            }
        })
    }
    //新增图片
    function openAdd() {
        bootbox.dialog({
            title:'新增轮播图',
            message: createAddContent("../whpage/addcarousel"),
            closeButton: true,
            buttons : {
                "success" : {
                    "label" : "<i class='icon-ok'></i> 保存",
                    "className" : "btn-sm btn-success",
                    "callback" : function() {//回调函数
                        //提交表单
                        $.ajax({
                            url:"../carousel/addCarousel",
                            type:'post',
                            data:$("#fm").serialize(),//表单序列化
                            success:function(data){
                                alert("新增成功")
                                //刷新表格
                                $('#myTable').bootstrapTable('refresh');
                            }
                        });
                    }
                },
                "cancel" : {
                    "label" : "<i class='icon-info'></i> 取消",
                    "className" : "btn-sm btn-danger"
                }
            }

        });
        uploadImg();

    }

    //修改图片
    function up(id) {
        uploadImg();
        bootbox.dialog({
            title:'修改轮播图',
            message: createAddContent("../whpage/addcarousel"),
            closeButton: true,
            buttons : {
                "success" : {
                    "label" : "<i class='icon-ok'></i> 保存",
                    "className" : "btn-sm btn-success",
                    "callback" : function() {//回调函数
                        //提交表单
                        $.ajax({
                            url:"../carousel/addCarousel",
                            type:'post',
                            data:$("#fm").serialize(),//表单序列化
                            success:function(data){
                                alert("新增成功")
                                //刷新表格
                                $('#myTable').bootstrapTable('refresh');
                            }
                        });
                    }
                },
                "cancel" : {
                    "label" : "<i class='icon-info'></i> 取消",
                    "className" : "btn-sm btn-danger"
                }
            }

        });
        $.ajax({
            url:'../carousel/upById',
            type:'post',
            data:{id:id},
            success:function (data) {
                $("input[name='id']").val(data.id),
                $("input[name='url']").val(data.url)
                uploadImg(data.url);
            }
        })


    }


    //上传图片
    function uploadImg(url){
        // 注意id
        $('#mimg').fileinput({
            initialPreview:url,
            //初始化图片配置：
            initialPreviewConfig: [
                {key: 1, showDelete: false}
            ],
            //是否初始化图片显示
            initialPreviewAsData: true,
            language: 'zh', //设置语言
            uploadUrl: '../carousel/img', //上传的地址
            allowedFileExtensions: ['jpg', 'gif', 'png'],//接收的文件后缀
            showUpload: true, //是否显示上传按钮
            showCaption: false,//是否显示标题
            browseClass: "btn btn-primary", //按钮样式
            //dropZoneEnabled: false,//是否显示拖拽区域
            //minImageWidth: 50, //图片的最小宽度
            //minImageHeight: 50,//图片的最小高度
            //maxImageWidth: 1000,//图片的最大宽度
            //maxImageHeight: 1000,//图片的最大高度
            //maxFileSize: 0,//单位为kb，如果为0表示不限制文件大小
            //minFileCount: 0,
            maxFileCount: 2, //表示允许同时上传的最大文件个数
            enctype: 'multipart/form-data', //content-type
            validateInitialCount:true,
            previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
            msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",

        }).on('fileuploaded', function(event, data, previewId, index) {
            //http://localhost:8080/bootstrap-wdd/
            var	imgval = data.response.path;
            $('#testimg').val(imgval);
        });
    }
</script>

</html>